<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/public.css">
    <title>Document</title>
    <style>
        .search{
            height: 5rem;
            width: 100%;
            position: fixed;
            top: 44px;
            background-color: #eee;
        }
        #search{
            display: block;
            width: 94%;
            height: 38px;
            line-height: 38px;
            border: 0;
            outline: 0;
            background-color: #fff;
            margin: 6px auto;
            border-radius: 2px;
            text-indent: 1rem;
        }
        .city_list{
            padding-top: 94px;
            background-color: #fff;
            font-size: 1.2rem;
        }
        li.type{
            background-color: #eee;
            line-height: 3rem;
            text-indent: 1.5rem;
        }
        li.city{
            line-height: 4.8rem;
            border-bottom: 1px solid #eee;
            text-indent: 2rem;
        }
        aside{
            position: fixed;
            right: 0;
            top: 0;
            height: 100vh;
            background-color: #fff;
            width: 2rem;
            display: flex;
            flex-wrap: wrap;
            align-content: center;      
        }
        aside a{
            display: block;
            width: 2rem;
            line-height: 2rem;
            text-align: center;
        }

    </style>
</head>
<body>
    <h1>卖座网</h1>
    <h2 id="alert_user">请使用移动端打开</h2>
    <div class="container">
        <nav class="up">
            <p><span id="cityName" style="margin-left: 1rem; font-size: 1.2rem;">X</span></p>
            <p><span style="text-align: center; font-size: 1.8rem">当前城市 -</span></p>
            <p><span style="text-align: right ; margin-right: 1rem; font-size: 1.2rem;"></span></p>
        </nav>
        <div class="search">
            <input id="search" type="text" placeholder="请输入要查询的城市">
            <ul class="search_list"></ul>
        </div>
        <ul class="city_list">
            <!-- <li class="type">A</li>
            <li class="city">鞍山</li> -->
        </ul>
        <aside></aside>
        <div id="loading">
            <div class="circle"></div>
            <p>加载中</p>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/request.js"></script>

<script>
    // localStorage.clear();
    //先判端本地是否有城市
        if (!localStorage.city) {
            //如果没有
            localStorage.city = JSON.stringify({
                id: "110100",
                name: "北京"
            })
        }
    //显示当前城市
    function showCity(){
        var obj = JSON.parse(localStorage.city);
        $("#cityName").html(obj.name);
    }
    showCity();

    if(!localStorage.cities){
        //如果不存在  发起网路请求
        getCityList(function (res) {
            localStorage.cities =JSON.stringify( res.data.cities)
            dealData(res.data.cities);
        })
    }else{
        //存在就走缓存
        var cities = JSON.parse(localStorage.cities)
        dealData(cities)
    }

    function dealData(cities){
        var list = {};
        cities.forEach(function(city){
            //拼音的首字母
            var key = city.pinyin.slice(0,1).toUpperCase();
            if(list[key]){
                //如果key存在
                list[key].push(city);
            }else{
                //如果key不存在
                list[key] = [city];
            }
        })
        setUl(list);
    }


    function setUl(list){
        //将k值拿到新数组中，并进行排序
        var arr =Object.keys(list).sort();
        arr.forEach(function(key){
            //创建侧边栏信息
            $(`<a class="${key}">${key}</a>`).appendTo("aside").click(function(){
                var li = $(".city_list").find("."+$(this).attr("class"))   //li为jq对象
                $(window).scrollTop(li.position().top-94);
            })
            //创建li.type
            $(`<li class="type ${key}">${key}</li>`).appendTo($(".city_list"));

            list[key].forEach(function(city){
                $(`<li class="city" cityId="${city.cityId}">${city.name}</li>`).appendTo($(".city_list")).click(function(){
                    //1.将城市信息保存在localStorage中
                    localStorage.city = JSON.stringify({
                        id : $(this).attr("cityId"),
                        name:$(this).html()
                    })
                    //页面跳转
                    location.href ="index.html";
                })
            })
        })
    }


</script>
</html>